<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>-->
    <script src="js/vue.js"></script>
<!--    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>-->
    <script src="js/axios.min.js"></script>
</head>

<body>
    <div id="d1">
        用户名：<input type="text" v-model="user.username"/><br/>
        密码：<input type="password" v-model="user.password"/><br/>

        <input type="button" value="get" @click="f1"/>
        <input type="button" value="get" @click="f2"/>
        <input type="button" value="post" @click="f3"/>
        <input type="button" value="put" @click="f4"/>
        <input type="button" value="delete" @click="f5"/>
        <hr/>
        用户名：<span>{{user.username}}</span><br/>
        密码：<span>{{user.password}}</span>
    </div>
    <script>

        new Vue({
            el: "#d1",
            data:{
                user:{
                    username:"abc",
                    password:"123",
                }
            },
            methods:{
                f1(){

                    var u=this.user;
                    // axios.get("http://127.0.0.1:8080/users/f1").then((r)=>{
                    //     // console.log(r.data);
                    // });
                    axios.get("http://127.0.0.1:8080/users/f1").then(function(response){
                        // console.log(response.data);
                        u.username=response.data.username;
                        u.password=response.data.password;
                    });

                },
                f2(){

                    var u=this.user;
                    // axios.get("http://127.0.0.1:8080/users/f1").then((r)=>{
                    //     // console.log(r.data);
                    // });
                    axios.get("http://127.0.0.1:8080/users/f2",{
                        params:this.user
                    }).then(function(response){
                        // console.log(response.data);
                        u.username=response.data.username;
                        u.password=response.data.password;
                    });

                },
                f3(){
                    var u=this.user;
                    // axios.post("http://127.0.0.1:8080/users/f2",{
                    //     params:this.user
                    // }).then(function(response){
                    //     u.username=response.data.username;
                    //     u.password=response.data.password;
                    // });


                    var params=new URLSearchParams();
                    params.append("username",this.user.username);
                    params.append("password",this.user.password);


                    axios.post("http://127.0.0.1:8080/users/f2",params)
                        .then(function(response){
                            u.username=response.data.username;
                            u.password=response.data.password;
                        });
                },
                f4(){
                    var u=this.user;
                    // axios.post("http://127.0.0.1:8080/users/f2",{
                    //     params:this.user
                    // }).then(function(response){
                    //     u.username=response.data.username;
                    //     u.password=response.data.password;
                    // });


                    var params=new URLSearchParams();
                    params.append("username",this.user.username);
                    params.append("password",this.user.password);


                    axios.put("http://127.0.0.1:8080/users/f2",params)
                        .then(function(response){
                            u.username=response.data.username;
                            u.password=response.data.password;
                        });
                },
                f5(){

                    var u=this.user;
                    // axios.get("http://127.0.0.1:8080/users/f1").then((r)=>{
                    //     // console.log(r.data);
                    // });
                    axios.delete("http://127.0.0.1:8080/users/f2",{
                        params:this.user
                    }).then(function(response){
                        // console.log(response.data);
                        u.username=response.data.username;
                        u.password=response.data.password;
                    });

                },
            },
        });
    </script>
</body>
</html>